<template>
  <div class="LoginAd">
    <el-card style="width: 550px; margin: 0 auto; height: 380px; ">
      <template #header>
        <div class="card-header" style="text-align: center; font-size: 20px; color: #409eff;">
          <span>课工场</span>
        </div>
      </template>
      <el-form ref="ruleFormRef" style="max-width: 600px; padding: 20px; height: 180px;" :model="ruleForm"
        :rules="rules" label-width="auto" class="flex flex-col justify-between items-center">
        <el-form-item label="用户名:" prop="username" class="w-full">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码:" prop="pwd" class="w-full">
          <el-input v-model="ruleForm.pwd" show-password />
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="ruleForm.captcha" class="captcha" type="text">
            <template #prefix>
              <el-icon>
                <Check />
              </el-icon>
            </template>
          </el-input>
          <img :src="imgUrl" @click="changeCaptcha" />
        </el-form-item>

        <el-form-item class="buttons">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置 </el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="text-gray-300">老铁 666 ！</span>
      </template>
    </el-card>
    <div class="wave">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref , onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import Api from '../api'
//引入router有两种写法，第一种如果用的是vue-router那就只能重新解构
// import { useRouter } from 'vue-router'
// const router = useRouter()
// 第二种导入router
import router from '../router'
import { loginStore } from '../store'
const store = loginStore()
interface RuleForm {
  username: string
  pwd: string
  captcha: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: 'admin',
  pwd: '123456',
  captcha: ''
})

// const locationOptions = ['Home', 'Company', 'School']
//表单验证
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 2, max: 10, message: '账号长度在2-10之间', trigger: 'blur' },
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20之间', trigger: 'blur' },
  ],
})
//登录
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 将前端字段名转换为后端期望的字段名
      const loginData = {
        userName: ruleForm.username,
        userPwd: ruleForm.pwd,
        captcha: ruleForm.captcha
      };

      Api.getLoginListAPI(loginData).then((res: any) => {
        console.log('loginres=>', res);
        // 只有在登录成功时才跳转
        if (res.code === 200) {
          router.push('/welcome');
          store.setUserInfo(res.data);
        }
      }).catch((error: any) => {
        console.error('login error:', error);
      });
    } else {
      console.log('error submit!', fields)
    }
  })
}

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


//验证码设置
const imgUrl = ref()
const changeCaptcha = async() =>{
  const res = await Api.getCaptchaAPI();
  console.log('captcha',res);
  imgUrl.value = res.data.imgurl;
}

onMounted(()=>{
  changeCaptcha();
})

</script>


<style scoped lang="scss">
.LoginAd {
  height: 100%;
  width: 100%;
  background-color: #2646b1;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-header {
  margin: 10px;
}

.buttons {
  display: inline-block;
  margin-top: 10px;
}


.wave {
  position: absolute;
  width: 100vw;
  bottom: 0;
  left: 0;
}

.waves {
  position: relative;
  width: 100%;
  height: 155vh;
  min-height: 100px;
  max-height: 200px;
}

.content {
  position: relative;
  height: 40vh;
  text-align: center;
  background-color: white;
}

.content a {
  margin: 0 5px;
  font-size: 12px;
  color: #333;
}

.content a:hover {
  color: #000;
}

/* Animation */

.parallax>use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 80px;
    min-height: 80px;
  }

  .content {
    height: 30vh;
  }

  h1 {
    font-size: 24px;
  }
}

.captcha {
  width: 230px;
  margin: 0 20px 0 0;
}
</style>